<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=IE8" > 
<link rel="stylesheet" href="admin/css/common.css" type="text/css" />
<link rel="stylesheet" href="admin/css/swfupload.css" type="text/css" />
<title>添加石材</title>
<script type="text/javascript" src="admin/js/jquery.js"></script>
<script type="text/javascript" src="admin/js/ajaxfileupload.js"></script>
<style>

	.tip{
	margin-left:10px;
	font-size: 9pt;
	color: red;	
}
input{height:20px;line-height:20px;background:#FFF;padding:2px 5px 2px 5px;margin:0;border:1px solid #CCCCCC}
select{width:120px;height:24px;line-height:24px;}

.box{width:99%;margin-bottom:50px;}
.box .hd{height:30px;line-height:30px;margin:0px 10px 0px 10px;padding-left:30px;color:#333333;font-weight:bold;font-size:14px;border-bottom:1px solid #CCCCCC;background:#EAEAEA;margin-bottom:-1px}
.box .bd{margin:10px;padding:10px;margin-top:0px;border:1px solid #CCCCCC}
</style>	
<style>
		ul.photoList li{display:block;height:150px;}
		ul.photoList li div.unselect,ul.photoList li div.select{display:block;float:left;width:130px;height:130px;margin-right:10px;}
		ul.photoList li div.unselect{width:120px;height:130px;overflow:hidden;padding:5px;margin-right:5px;}
		ul.photoList li div.detail{display:block;width:auto;min-width:500px;max-width:750px;height:130px;float:left;}		
		ul.photoList li div.select{width:120px;height:120px;padding:5px;background:#CCCCCC;}

		ul.photoList li div.detail textarea{width:500px;height:60px;}
		ul.photoList li textarea{display:block;width:120px;height:50px;margin-top:10px;}
		ul.photoList li div.detail .name{display:block;height:22px;line-height:22px;}
		ul.photoList li div a{display:block;width:40px; text-align:center;float:right;height:20px;line-height:20px;}
		ul.photoList li div span{display:block;width:180px;height:20px;float:left;line-height:20px;}
		
	</style>
	
<script  type="text/javascript">
	function setDPhoto(e,id){

		 $("#photoList>li").each(function(){
			    $(this).find("img").parent().removeClass("select").addClass("unselect");
			});
		 $("#border_"+id).removeClass("unselect");
		 $("#border_"+id).addClass("select");
		var photoUrlId = "photoUrl_"+id;
		var photoUrl = document.getElementById(photoUrlId).value;
		var tipId = "tip_"+id;
		document.getElementById(tipId).innerHTML = "正在设置默认图片...";
		var params = {
				stoneId : $("#stoneId").val(),
				photoUrl:photoUrl,
				photoId:id
			};
		jQuery.post("adminj/setDefaultPhoto.action", params,
				callbacksetDPhoto, "json");
		clearTip();
	}
	function callbacksetDPhoto(value){
		var tipId = "tip_"+value.photoId;
		document.getElementById(tipId).innerHTML = "设置成功";
		}
	function clearTip(){
		$("#photoList>li").each(function(){
			$(this).find('span').html("");
		});
	}
	</script>
	<script  type="text/javascript">
	function setPhotoDesc(id){
		var textId = "text_"+id;
		var text = document.getElementById(textId).value;
		var tipId = "tip_"+id;
		document.getElementById(tipId).innerHTML = "正在保存...";
		var params = {
				photoDesc : text,
				photoId:id
			};
		jQuery.post("adminj/savePhotoDesc.action", params,
				callbacksavePhotoDesc, "json");
	}
	function callbacksavePhotoDesc(value){
		var tipId = "tip_"+value.photoId;
		document.getElementById(tipId).innerHTML = "保存成功";
	}

	
	function ajaxFileUpload()
	{
		var file =document.getElementById("file").value;
		if(file=="")
		{
		   alert("不能上传空图片！");
		   return false;
		}

		$.ajaxFileUpload
		(
			{
				url:'adminj/ajaxFileUpload.action?stoneId=${stoneId }',//用于文件上传的服务器端请求地址
				secureuri:false,//一般设置为false
				fileElementId:'file',//文件上传空间的id属性  <input type="file" id="file" name="file" />
				dataType: 'json',//返回值类型 一般设置为json
				success: function (data, status)  //服务器成功响应处理函数
				{
					//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
					if(typeof(data.error) != 'undefined')
					{
						alert(data.error);
						return;
					}
					var table = "";
					table+="<li id='photo_"+data.photoId+"'>";
					table+="<div class='unselect' id='border_"+data.photoId+"'>";
					table+="	<img src='upload/stone/120/"+data.photoUrl+"' onclick='setDPhoto(this,"+data.photoId+")'/>";
					table+="</div>";
					table+="<div class='detail'>";
					table+="	<input type='hidden' id='photoUrl_"+data.photoId+"' value='"+data.photoUrl+"'/>";
					table+="	<div class='name'><font>"+data.fileName+"</font>&nbsp;&nbsp;&nbsp;<font style='cursor:pointer;color:blue' onclick='deletePhoto("+data.photoId+")'>删除</font>&nbsp;&nbsp;&nbsp;<font style='cursor:pointer;color:blue' onclick='setDPhoto(this,"+data.photoId+")'>设为默认</font></div>";
					table+="	<textarea id='text_"+data.photoId+"' type='text' name='photo.description'></textarea>";
					table+="	<span style='color:green;font-size:12px;' id='tip_"+data.photoId+"'></span><a class='button' onclick='setPhotoDesc("+data.photoId+")'>确定</a>";
					table+="</div>";
					table+="</li>";
					$(table).appendTo("#photoList");
				},
				error: function (data, status, e)//服务器响应失败处理函数
				{
					alert(data.error);
				}
			}
		)
		return false;
	}
	function deletePhoto(photoId){
		if(confirm("确定要删除图片吗？"))
		{	
			jQuery.post("adminj/deletePhoto.action",{photoId:photoId,stoneId:${stoneId }},callbackDeletePhoto,"json");
		}
	}
	function callbackDeletePhoto(value){
		var node = $("#photo_"+value.photoId);
		node.fadeOut('slow');
	}
	</script>
</head>

<body>
<div id="man_zone">
  
 <div class="box">
	<div class="hd">修改石材图片 <span class="tip">点击图片设置为默认图片</span></div>
	<div class="bd">
	<input type="hidden" id="stoneId" value="${stoneId }" />
	<ul class="photoList" id="photoList">
	  		<c:forEach items="${photos }" var="item" > 
	  			<c:if test="${item.defaultPhoto == 1}">
			    <li id="photo_${item.id }">
	   				<div class="select" id="border_${item.id }">
	   					<img src="upload/stone/120/${item.url }" onclick="setDPhoto(this,${item.id })"/>
	   				</div>
	   				<div class="detail">
		   				<input type="hidden" id="photoUrl_${item.id }" value="${item.url }"/>
		   				<div class="name"><font>${item.name }</font>&nbsp;&nbsp;&nbsp;<font style="cursor:pointer;color:blue" onclick="deletePhoto(${item.id })">删除</font>
		   				&nbsp;&nbsp;&nbsp;<font style="cursor:pointer;color:blue" onclick="setDPhoto(this,${item.id })">设为默认</font></div>
		    			<textarea id="text_${item.id }" type="text" name="photo.description">${item.description }</textarea>
		    			<span style="color:green;font-size:12px;" id="tip_${item.id }"></span><a class="button" onclick="setPhotoDesc(${item.id })">确定</a>
	    			</div>
	   			</li>
	   		</c:if>
  			<c:if test="${item.defaultPhoto != 1}">
	  			<li id="photo_${item.id }">
	  				<div class="unselect" id="border_${item.id }">
	   					<img src="upload/stone/120/${item.url }" class="unselect" onclick="setDPhoto(this,${item.id })"/>
	   				</div>
	   				<div class="detail">
		   				<input type="hidden" id="photoUrl_${item.id }" value="${item.url }"/>
		   				<div class="name"><font>${item.name }</font>&nbsp;&nbsp;&nbsp;<font style="cursor:pointer;color:blue"  onclick="deletePhoto(${item.id })">删除</font>
		   				&nbsp;&nbsp;&nbsp;<font style="cursor:pointer;color:blue" onclick="setDPhoto(this,${item.id })">设为默认</font></div>
		    			<textarea id="text_${item.id }" type="text" name="photo.description">${item.description }</textarea>
		    			<span style="color:green;font-size:12px;" id="tip_${item.id }"></span><a class="button" onclick="setPhotoDesc(${item.id })">确定</a>
	    			</div>
	   			</li>
  			</c:if>
		</c:forEach>			
	</ul>
	<div style="clear:both"></div>
   <div>
   		<div style="margin-top:5px;font-size:12px;float:left;font-weight:bold;">添加图片（jpg、png、gif格式，大小至少为560*560）：</div>                      		
        <input type="file" id="file" name="file" />
		<input type="button" class="button" value="上传" onclick="return ajaxFileUpload()">
   </div>
   <div style=" text-align:center" >
		<a href="admin/toModifyDesc.action?stoneId=${stoneId }">确定,下一步</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="admin/toModifyDesc.action?stoneId=${stoneId }">跳过此步</a>
   </div>
  </div>
</div>
 
</div>
</body>
</html>
